import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Form, Input, Button ,Select, Row, Col, DatePicker , Radio, Tooltip, Icon, Breadcrumb, Message, InputNumber  } from 'antd';
import PriceBox from './priceBox'
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const RangePicker = DatePicker.RangePicker;

var Reflux = require('reflux');
var ChargeManageActions = require('./actions/chargeManageActions');
var LadderParamsStore = require('./stores/LadderParamsStore');


let uuid = 0;
let Demo = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },
  mixins: [
    Reflux.listenTo(LadderParamsStore, 'onMatch')
  ],
  onMatch(val) {
    this.setState({
      params:val
    });
  },
  getInitialState() {
    return {
      loading: false,
      data:[],
      priceStatus:'1',
      chargeType: '1',
      unit: '5', // 单位默认为元
      renderBox:null,
      params:{},
      ladderArry:[0], //阶梯数组
      classify: '1', // 计费分类,默认 固定
      isFixedDisabled: false, // 是否可选，默认可选
      isNormalDisabled: false, // 是否正常收费，默认是正常收费  是否可选,
    }
  },

  // 正常收费 1 ,阶梯收费 2 ,面积收费3 ,切换
  switchChargeType(e) {
    let val = e.target.value;
    let classify = this.state.classify;
    if(classify == '1'){ // 固定
      switch (val){
        case '3': // 面积收费
          this.setState({
            isNormalDisabled: true,
            unit: '4' // 选择平方
          });
          break;
       default:
          this.setState({
            isNormalDisabled: false,
            unit: '5' // 选择度
          });
          break; 
      }
   
    }

    this.setState({
      chargeType: val,
    });
    ChargeManageActions.getLadderParams({ladderParams: ''});
  },

  // classify计费分类 固定、仪表切换
  switchClassify(e) {
    let val = e.target.value;
    if(val == '1'){ // 选择固定
      this.setState({
        isFixedDisabled: false, 
        unit: '5'
      });
    }
    if(val == '2'){ // 选择仪表
      this.setState({
        isFixedDisabled: true, 
        unit: '1'
      });
    }
    this.setState({
      classify: val,
      chargeType: '1' // 默认正常收费
    });
  },

  // 切换单位
  switchUnit(e){
    let val = e.target.value;
    this.setState({
      unit: val
    });
  },
 

  handleSubmit(e){
    e.preventDefault();
    let param = this.props.form.getFieldsValue();
    Object.assign(param,this.state.params);
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      this.add(param);
    });


  },
  add(param){
    Utils.sendAjax({
      url:'/cost/add',
      data:JSON.stringify(param),
      callback:(result) => {
        if (result.code === '200') {

          let goPathUrl = '/landlord/houseDecoration/chargeManage/chargeList'
          this.context.router.push(goPathUrl);
          this.setState({
            loading: true,
          });
        } else {
          Message.error(result.message, 10);
          this.setState({
            loading: false,
          });
        }
      }
    });
  },

  render () {
    const { getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const costNameProps = getFieldProps('costName', {
      initialValue:'',
      rules: [
        { required: true, message: '收费项名称不能为空' },
      ],
    });
    const costPeriodProps = getFieldProps('costPeriod', {
      initialValue:'1',
      // rules: [
      //   {required: true, message: '收费周期不能为空'}
      // ]
    });

    const lowPriceProps = getFieldProps('lowPrice', {
      initialValue:'1',
      // rules: [
      //   {required: true, message: '最低价不能为空'}
      // ],
      // onChange:(value) =>{
      //   value.toString();
      // }
    });


    return (

          <div className="form-group inner-content">
            <Form horizontal form={this.props.form} >
              <FormItem
                {...formItemLayout}
                label="收费项名称"
              >
                <Input type="text" {...costNameProps} placeholder="" style={{width:200}}/>
              </FormItem>
              {
              //   <FormItem
              //   {...formItemLayout}
              //   label="收费方式"
              // >
              //   <RadioGroup {...getFieldProps('costWay', { initialValue: '1'} )}>
              //     <Radio value="1">普通收费</Radio>
              //     <Radio value="2">分摊收费</Radio>
              //   </RadioGroup>
              // </FormItem>
              }
                <FormItem
                {...formItemLayout}
                label="计费分类"
              >
                <RadioGroup {...getFieldProps('classify', { initialValue: this.state.classify, onChange:this.switchClassify } )}>
                  <Radio value="1">固定</Radio>
                  <Radio value="2">仪表</Radio>
                </RadioGroup>
              </FormItem>
              
              <FormItem
                {...formItemLayout}
                label="计费方式"
              >
              
                <RadioGroup {...getFieldProps('chargeType', {  initialValue: this.state.chargeType })}  onChange={this.switchChargeType}>
                  <Radio key="1" value="1">正常收费</Radio>
                  
                  {
                    // this.state.isFixedDisabled?
                    // <Radio key="3" value="3" disabled>按面积收费</Radio>:
                    // <Radio key="3" value="3" >按面积收费</Radio>
                  }
                  { this.state.isFixedDisabled?
                    <Radio key="2" value="2" >阶梯收费</Radio>: ''
                  }
                  
                </RadioGroup>
              </FormItem>

              
              {
                this.state.classify == '1'?
                <FormItem
                  {...formItemLayout}
                  label="金额"
                >
                  <PriceBox priceStatus={this.state.chargeType} />
                </FormItem>
                :
                 <FormItem
                  {...formItemLayout}
                  label="单价"
                >
                  <PriceBox priceStatus={this.state.chargeType} />
                </FormItem>
              }
             
              {
                this.state.classify == '1'?
                <Radio style={{display:'none'}}  {...getFieldProps('unit', { initialValue: '5' })} />
                :
                  <FormItem
                  {...formItemLayout}
                  label="单位"
                >
                <RadioGroup  {...getFieldProps('unit', { initialValue: this.state.unit })} onChange={this.switchUnit}>
                
                  
                  {
                    this.state.isFixedDisabled?
                    <Radio key="1" value="1" >度</Radio>:
                    ''
                  }
                  {
                    this.state.isFixedDisabled?
                    <Radio key="2" value="2">吨</Radio>:
                    ''
                  }
                  {
                    this.state.isFixedDisabled?
                    <Radio key="3" value="3">立方</Radio>:
                    ''
                  }
                  {
                    // this.state.isFixedDisabled?
                    // <Radio key="4" value="4" disabled>平方</Radio>:
                    // (
                    //  this.state.isNormalDisabled? 
                    //  <Radio key="4" value="4" >平方</Radio>:
                    //  <Radio key="4" value="4" disabled>平方</Radio>
                    // )
                    
                  }
                  {
                    this.state.isFixedDisabled?
                    '':
                    (
                      this.state.isNormalDisabled? 
                    <Radio key="5" value="5" disabled>平方</Radio>:
                    <Radio key="5" value="5" >平方</Radio>
                    )
                    
                  }
                
                </RadioGroup>
                
                </FormItem>
              }
              {
                this.state.classify == '1'?''
                :
                <FormItem
                  {...formItemLayout}
                  label="最低费用"
                >
                  <InputNumber min={1} max={1000000}  defaultValue={1}  {...lowPriceProps} placeholder="" style={{width:100}}/>
                  元
                </FormItem>
              }
              
              <FormItem
                {...formItemLayout}
                label="收费周期"
              >
                <InputNumber min={1} max={1000000} defaultValue={1}  type="text" {...costPeriodProps}  placeholder="" style={{width:100}} />
                月/次
              </FormItem>

              <FormItem wrapperCol={{ span: 16, offset: 3 }} style={{ marginTop: 24 }}>
                <Button type="primary" loading={this.state.loading}  onClick={this.handleSubmit}>确定</Button>
              </FormItem>
            </Form>
          </div>

    );
  }
});

Demo = Form.create()(Demo);
export default Demo




